<template>
  <div class="add-address">
    <top-header :isLeft="true" title="新建地址"></top-header>

      <div class="content">
        <a-form-model ref="ruleForm" :model="tempAddress" :rules="rules">
          <a-form-model-item label="姓名" prop="user_name">
            <a-input v-model="tempAddress.user_name" />
          </a-form-model-item>

          <a-form-model-item label="手机号" prop="user_phone">
            <a-input v-model="tempAddress.user_phone"/>
          </a-form-model-item>

          <a-form-model-item label="地址" prop="address_location">
            <a-input
              @click="selectLocation"
              v-model="tempAddress.address_location"
            >
              <a-tooltip slot="suffix" title="选择地址" @click="selectLocation">
                <span style="color:#063">选择地址</span>
                <i
                  class="iconfont icon-dingwei_huaban1"
                  style="color:#063;font-weight:bold"
                ></i>
              </a-tooltip>
            </a-input>
          </a-form-model-item>

          <a-form-model-item label="门牌号">
            <a-input v-model="tempAddress.address_doorplate" />
          </a-form-model-item>

          <a-form-model-item label="标签">
            <a-radio-group default-value="1" v-model="tempAddress.label">
              <a-radio-button value="0">
                家
              </a-radio-button>
              <a-radio-button value="1">
                公司
              </a-radio-button>
              <a-radio-button value="2">
                其他
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>

        <a-form-model-item>
          <a-button type="primary" block shape="round" @click="onSubmit">
            保 存
          </a-button>
        </a-form-model-item>
        </a-form-model>
      </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  data() {
    return {
      rules: {
        user_name: [
          { required: true, message: "请填写姓名", trigger: "blur" },
          { min: 2, max: 5, message: "请输入正确姓名", trigger: "blur" },
        ],
        user_phone: [
          { required: true, message: "请输入正确手机号", trigger: "blur" },
        ],
      },
    };
  },
  computed:{
    tempAddress(){
      return this.$store.getters.tempAddress
    }
  },
  components: {
    TopHeader,
  },
  methods: {
    onSubmit(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // 验证通过的逻辑
          //把数据加到用户个人信息里的common_address里
          this.$store.dispatch("setCommonAddress",this.tempAddress);
          //把页面推到Address页面
          this.$router.push({name:"Address"});
        } else {
          return false;
        }
      });
    },
    selectLocation() {
      this.$router.push({name:"AddressSelect"})
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 70%;
  padding: $common-padding;
}
</style>
